<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue'
  import * as echarts from 'echarts'

  const chartDom = ref()
  // var chartDom = document.getElementById('main');
  let option = reactive({})
  const props = defineProps({
    withdraw: { type: Number, default: 800 },
  })

  const initOption = () => {
    option = {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        // left: 'left',
        right: 'right',
        top: 'center',
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          center: ['30%', '50%'],
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    }
  }

  const refresh = () => {
    initOption()
    var myChart = echarts.init(chartDom.value)
    option && myChart.setOption(option, true)
  }

  onMounted(() => {
    refresh()
  })
</script>
<template>
  <div id="main" ref="chartDom" :style="{ width: props.withdraw + 'px', height: '500px' }"></div>
</template>
<style lang="less" scoped></style>
